<template>
  <div>
    <el-collapse value="common">
      <el-collapse-item title="公共配置" name="common">
        <el-form :model="widget.UI.data" label-width="65px" size="mini" class="pad-lft-rgt-10">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="提示内容">
                <el-input v-model="widget.UI.data.placeholder" controls-position="right" placeholder="请输入"
                          class="width-100">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="默认索引">
                <el-input-number v-model="widget.UI.data.selectedIndex" controls-position="right" placeholder="请输入"
                                 class="width-100" :min="0" :max="widget.UI.data.items.length">
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10" :span="12">
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">背景颜色</span>
                <PopoverColor :colorValue="widget.UI.data.backgroundColor">
                  <CustomColorPicker v-model="widget.UI.data.backgroundColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">文本颜色</span>
                <PopoverColor :colorValue="widget.UI.data.textColor">
                  <CustomColorPicker v-model="widget.UI.data.textColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">选中颜色</span>
                <PopoverColor :colorValue="widget.UI.data.activeColor">
                  <CustomColorPicker v-model="widget.UI.data.activeColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="可选项配置" name="optionConfig">
        <div class="pad-lft-rgt-10">
          <div class="inputs-item" v-for="(data, index) in  widget.UI.data.items" :key="index">
            <div class="flex-com mar-btm">
              <span class="label-title">选项{{index + 1}}</span>
              <el-input v-model=" widget.UI.data.items[index]" placeholder="请输入选项" size="mini"></el-input>
              <span class="el-icon-delete cursor-pointer" @click="deleteOption(index)"></span>
            </div>
          </div>
          <div class="font-color-primary font-size-12 font-weight-bold">
            <div class="display-inline cursor-pointer" @click="addOption">
              <i class="iconfont icon-tianjia"></i><span class="mar-lft-5">添加选项值</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import {WidgetSelectInput} from "@/modules/IDE/widget/atom/widgetSelectInput";
  import CustomColorPicker from '@/components/IDE/colorPicker/Color.vue';
  import PopoverColor from '@/components/IDE/colorPicker/Popovers.vue';

  export default {
    name: 'SelectInputSpec',
    components: {
      CustomColorPicker, PopoverColor
    },
    props: {
      widget: {
        type: WidgetSelectInput,
        default: () => {
          return {};
        }
      }
    },
    computed: {
      state() {
        return this.widget.getCurrentState();
      },
    },
    data() {
      return {}
    },
    methods: {
      addOption() {
        this.widget.UI.data.items.push('');
      },
      deleteOption(idx) {
        this.widget.UI.data.items.splice(idx, 1)
      },
    }
  };
</script>

<style scoped lang="less">
  .flex-com {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .label-title {
    display: inline-block;
    min-width: 50px;
    color: @colorGray10;
    font-size: 14px;
    margin-right: 5px;
  }

  .addAction {
    color: #2d69e0;
    font-size: 14px;
  }

  .divider {
    height: 2px;
    background: #eee;
    margin: 10px 0;
  }
</style>
